<template>
  <div class="home">
    <!-- 头部 -->
    <div class="home-header">
      <div class="home-header-left">欢迎进入xxx系统</div>
      <div class="home-header-right">
        当前时间：{{ currDate }}，已更新
        <base-button @btnEvent="signOut" btnText="退出登录" btnSize="small"></base-button>
      </div>
    </div>
    <!-- 内容 -->
    <base-breadcrumb
      :breadList="breadList"
      class="home-readcrumb"
    ></base-breadcrumb>
    <base-button
    class="home-button"
      @btnEvent="btnEvent"
      btnType="default"
      :btnText="$route.path === '/home/dataView' ? '图例展示' : '数据展示'"
    ></base-button>

    <!-- 二级页面 -->
    <router-view />
  </div>
</template>

<script>
import baseBreadcrumb from '../../components/baseBreadcrumb.vue';
import baseButton from '../../components/baseButton.vue';

export default {
  data() {
    return {
      currDate: '',
      breadList: [],
    };
  },
  components: {
    baseBreadcrumb,
    baseButton,
  },
  created() {
    this.currDate = this.formatDate(new Date());
    // eslint-disable-next-line no-console
    console.log(this.$route);
    this.getPath();
  },
  watch: {
    // eslint-disable-next-line func-names
    '$route.matched': function (newValue, oldValue) {
      // eslint-disable-next-line no-console
      console.log(newValue);
      this.getPath();
    },
  },
  methods: {
    signOut() {
      localStorage.removeItem('token');
      localStorage.removeItem('exceedTime');
      this.$router.push('/');
    },
    getPath() {
      let nameList = this.$route.meta.title.split('/');
      let matchList = this.$route.matched;
      let pathList = [];
      matchList.forEach((element, index) => {
        pathList.push({
          pathName: nameList[index],
          pathWay: element.path,
        });
      });
      this.breadList = pathList;
    },
    btnEvent() {
      if (this.$route.path === '/home/chartView') {
        this.$router.push('/home/dataView');
      } else {
        this.$router.push('/home/chartView');
      }
      // this.getPath();
    },
    formatDate(d) {
      let date = new Date(d);
      let YY = `${date.getFullYear()}-`;
      let MM = `${
        date.getMonth() + 1 < 10
          ? `0${date.getMonth() + 1}`
          : date.getMonth() + 1
      }-`;
      let DD = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
      let hh = `${
        date.getHours() < 10 ? `0${date.getHours()}` : date.getHours()
      }:`;
      let mm = `${
        date.getMinutes() < 10 ? `0${date.getMinutes()}` : date.getMinutes()
      }:`;
      // eslint-disable-next-line operator-linebreak
      let ss =
        date.getSeconds() < 10 ? `0${date.getSeconds()}` : date.getSeconds();
      return `${YY + MM + DD} ${hh}${mm}${ss}`;
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  padding: 20px;
}
.home-header {
  display: flex;
  justify-content: space-between;
  line-height: 24px;
}
.home-header-left {
  font-size: 24px;
  font-weight: 700;
}
.home-readcrumb {
  margin-top: 20px;
}
.home-button{
  margin-top: 20px;
}
</style>
